<script setup>
import {onMounted} from 'vue'
import {NAvatar, NButton, NFlex, NImage, NInput, NTabPane, NTabs, NTag, useMessage} from 'naive-ui'
import CommonPage from '@/components/page/CommonPage.vue'
import api from '@/api'
import default_image from "@/assets/images/mz.jpg";
import {renderIcon} from "@/utils";
import Project from './project.vue'
import Order from './order.vue'
import Cases from './cases.vue'
import Interview from './interview.vue'
import Tags from './tags.vue'
import Photo from './photo.vue'
import Material from './material.vue'
import Test from './test.vue'
import Medicine from './medicine.vue'
import Return from './return.vue'
import Appointment from './appointment.vue'
import Info from './info.vue'
import Sign from './sign.vue'
import Visit from './visit.vue'
import SurveyUnified from './survey-unified.vue'
import TheIcon from "@/components/icon/TheIcon.vue";
import CustomerInfo from "./customerinfo.vue";
import HealthRecord from "./healthrecord.vue";
import AdviceFrom from "./advicefrom.vue";

const message = useMessage()

const props = defineProps({
  infoData: {
    type: Object,
    required: true
  }
});
const data = reactive({
  select_customer:{
    name:"",
    card_number:"--",
    user_level_name:"--",
    mobile:"--",
    bi_date:"--",
    sex:"--",
    hkqd:"--",
    age:"--",
    created_at:"--",
    last_come:"--",
    record_hobby:[],
    totals:{
      weimei:0,
      cdp:0,
      fujia:0,
      other:0,
      buy_money:0,
      cases:0,
      appoint_count:0,
      return_count:0,
      operation_count:0,
      face_count:0,
      test_count:0,
      having_customers:0,
      customers_level5:0

    }
  },
  // 问卷相关状态
  surveyVisible: false
});

onMounted(() => {
  data.select_customer = props.infoData
})

// 问卷相关函数
function openSurvey() {
  data.surveyVisible = true
}

function closeSurvey() {
  data.surveyVisible = false
}

function onSurveySubmitSuccess(result) {
  console.log('问卷提交成功:', result)
  // 可以在这里刷新相关数据
}

function onSurveyUpdateSuccess(result) {
  console.log('问卷更新成功:', result)
  // 可以在这里刷新相关数据
}

function close_draw(){
  data.select_customer.draw = false
}

function update_info(){
  if(props.infoData.user_id){
    api.getCustomer({
      user_id:props.infoData.user_id,
    }).then((res) => {
       data.select_customer = res.data
    })
    return true
  }else{
    message.success('请先添加用户信息并保存')
    return false
  }

}

const emit = defineEmits(['call-parent'])
function on_refx(){
  update_info();
  emit('call-parent')
}

</script>

<template>
  <div class="main_box">
    <div class="main_header">
      <div style="display: flex">
        <NAvatar :src="data.select_customer.avatar"  class="avatar" />

        <div class="info">
          <span class="name">{{data.select_customer.name}}{{data.select_customer.mobile}} <span style="background: #ff8c25;padding: 2px 4px;border-radius: 2px;font-size: 10px">{{data.select_customer.user_level_name}}</span> </span><br>
          <span class="no">No.{{data.select_customer.card_number}}
             <n-button v-for="item in data.select_customer.record_hobby" type="error" :bordered="false" size="tiny" class="tags">{{item.content}}</n-button>
          </span>
        </div>

      </div>
      <div>
       <TheIcon icon="material-symbols:close" style="cursor:pointer" :size="25" class="mr-5" @click="close_draw"/>
      </div>
    </div>
    <n-tabs type="segment"  animated size="large" :tabs-padding="20" @before-leave="update_info">
          <n-tab-pane name="基础信息"  >
            <Info :info-data="props.infoData" @call-parent="on_refx"/>
          </n-tab-pane>
          <n-tab-pane name="大健康问诊记录">
            <CustomerInfo :info-data="props.infoData"/>
          </n-tab-pane>
          <n-tab-pane name="生殖问诊记录">
            <HealthRecord :info-data="props.infoData"/>
          </n-tab-pane>
          <n-tab-pane name="咨询记录">
            <AdviceFrom :info-data="data.select_customer"/>
          </n-tab-pane>
          <n-tab-pane name="报告查询">
            <Test :info-data="data.select_customer"/>
          </n-tab-pane>
          <n-tab-pane name="抗衰计划">
            <Appointment :info-data="data.select_customer"/>
          </n-tab-pane>
          <n-tab-pane name="订单记录">
            <Order :info-data="data.select_customer"/>
          </n-tab-pane>
          <n-tab-pane name="回访计划">
            <Visit :info-data="data.select_customer"/>
          </n-tab-pane>
          <n-tab-pane name="项目划扣">
            <Project :info-data="data.select_customer"/>
          </n-tab-pane>
          <n-tab-pane name="诊疗记录">
            <Cases :info-data="data.select_customer"/>
          </n-tab-pane>
          <n-tab-pane name="健康顾问记录">
            <Interview :info-data="data.select_customer"/>
          </n-tab-pane>
<!--          <n-tab-pane name="知情同意书">-->
<!--            <Sign :info-data="data.select_customer"/>-->
<!--          </n-tab-pane>-->
          <!-- <n-tab-pane name="问卷管理">
            <div style="padding: 20px; text-align: center;">
              <NButton type="primary" size="large" @click="openSurvey">
                <TheIcon icon="material-symbols:quiz" :size="20" class="mr-5" />
                问卷管理
              </NButton>
            </div>
          </n-tab-pane> -->
          <n-tab-pane name="处方管理">
            <Medicine :info-data="data.select_customer"/>
          </n-tab-pane>
<!--          <n-tab-pane name="耗材记录">-->
<!--            <Material :info-data="data.select_customer"/>-->
<!--          </n-tab-pane>-->
          <n-tab-pane name="对比照">
            <Photo :info-data="data.select_customer"/>
          </n-tab-pane>
          <n-tab-pane name="客户笔记">
            <Tags :info-data="data.select_customer"/>
          </n-tab-pane>
          <n-tab-pane name="治疗方案">
            <Return :info-data="data.select_customer"/>
          </n-tab-pane>

        </n-tabs>
  </div>

  <!-- 统一问卷组件 -->
  <SurveyUnified
    v-if="data.surveyVisible"
    :info-data="data.select_customer"
    @submit-success="onSurveySubmitSuccess"
    @update-success="onSurveyUpdateSuccess"
    @close="closeSurvey"
  />
</template>

<style>
.main_header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  height:60px;
  background: linear-gradient(90deg, #c87373 10%, #67367e 100%);
  padding:0 20px;
  color: #fff;
  .tags{
    margin-right: 5px;
  }
  .avatar{
    width: 40px; height: 40px; margin-right: 10px;border-radius: 50%;
    border:2px solid #fff;
  }

  .info{
    height: 40px;
    line-height: 20px;
    .no{
      font-size: 12px;
    }

  }
}

/* 减小标签页字号 */
:deep(.n-tabs-tab) {
  font-size: 12px;
}
</style>